<template>
  <div class="course-audit-wrap">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-fa fa-check"></i> 课程审核
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container">
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="courseName" label="课程名称" width="180">
        </el-table-column>
        <el-table-column prop="teacherName" label="教师姓名" width="120">
        </el-table-column>
        <el-table-column prop="credit" label="学分" width="80">
        </el-table-column>
        <el-table-column prop="time" label="上课时间" width="180">
        </el-table-column>
        <el-table-column prop="location" label="上课地点" width="180">
        </el-table-column>
        <el-table-column prop="description" label="课程简介">
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="handleAudit(scope.row, true)"
            >通过</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleAudit(scope.row, false)"
            >拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import * as api from "../../api/admin/course";

export default {
  name: "AdminCourseAudit",
  data() {
    return {
      tableData: [],
      loading: false
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const response = await api.getPendingCourses();
        this.tableData = response.data;
      } catch (error) {
        this.$message.error("获取待审核课程列表失败");
      }
      this.loading = false;
    },
    async handleAudit(row, approved) {
      try {
        await api.auditCourse(row.id, approved);
        this.$message.success(approved ? "已通过审核" : "已拒绝审核");
        this.fetchData();
      } catch (error) {
        this.$message.error("审核操作失败");
      }
    }
  }
};
</script>

<style scoped>
.course-audit-wrap {
  padding: 20px;
}
.container {
  margin-top: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
</style> 